<template>
  <table-where :forms="forms" />
  <edit-table ref="editTableRef" :editTbleDatas="editTbleDatas"></edit-table>
</template>

<script setup name="addTableHead">
import { reactive, ref,onActivated } from 'vue'
import { POSTJSON } from '@/components/utils/http'
const props = defineProps({
  add: Boolean,
  editTbleDatas:Object
})
const emit = defineEmits(["close"])
const add = ref(props.add)
const editTableRef = ref();
const editTbleDatas = props.editTbleDatas;

const addrow = () => {
  if(forms.data.table_key){
    const obj = editTbleDatas.getRow()
    obj.table_key = forms.data.table_key
    editTbleDatas.editData.push(obj)
  }
}
const save = () => {
  if (editTableRef.value.tableRules()) {
    POSTJSON('/Menu/addTable', editTbleDatas.editData).then(data => {
      if (data.code === 200) {
        editTbleDatas.editData = []
      }
    })
  }
}
const forms = reactive({
  data: {table_key:null},
  rules: [],
  compValue: [
    { label: "表格名称",value:"table_key",type:'iconinput',placeholder:"table_key"},
    { label: '添加', type: 'button', onclick: addrow },
    { label: '保存', type: 'button', onclick: save },
    { label: '返回', type: 'button', onclick: ()=>{
      emit("close")
    } }
  ]
})
const setFromData  = (data)=>{
  forms.data = data;
}
defineExpose({setFromData})
</script>
